<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
        }
        
        #container {
            height: 100%;
            overflow-y: scroll;
        }
        
        #loading {
            display: none;
            text-align: center;
            padding: 10px;
            font-size: 14px;
        }
        
        #list {
            padding: 0 5px;
        }
        
        #list li {
            height: 150px;
            background-color: #eee;
            list-style: none;
            padding: 10px;
            box-sizing: border-box;
            margin-bottom: 20px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="container">
        <ul id="list">

        </ul>
        <div id="loading">Loading...</div>
    </div>

    <script>
        // 获取元素
        var container = document.getElementById("container");
        var list = document.getElementById("list");
        var loading = document.getElementById("loading");
        let html = document.querySelector('html')
            // 生成随机数函数
        function generateRandom(start, end) {
            return Math.floor(Math.random() * (end - start) + start + 1)
        }
        // 生成随机字母函数
        function generateName(count = 4) {
            let str = ''
            for (let i = 0; i < count; i++) {
                str += String.fromCharCode(generateRandom(65, 90))
            }
            return str
        }
        // 生成随机颜色
        function getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        // 生成数据函数，可以根据page以及pageSize生成数据
        function generateData(page, pageSize = 10) {
            const result = []
            for (let i = 0; i < pageSize; i++) {
                result.push({
                    id: `第${page}页，第${i + 1}条`,
                    name: generateName(),
                    age: generateRandom(18, 38),
                    backgroundColor: getRandomColor()
                })
            }
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(result)
                }, 1000);
            })
        }

        function renderHtml() {
            let str = ''
            for (let i = 0; i < data.length; i++) {
                const current = data[i]
                str += `<li style="background-color: ${current.backgroundColor}">
                            <p>姓名：${current.name}</p>
                            <p>id：${current.id}</p>
                            <p>年龄：${current.age}</>
                        </li>`
            }
            list.innerHTML = str
        }

        // 定义变量
        var page = 1; // 当前页码
        var clientHeight = container.clientHeight; // 容器可视高度
        var scrollTop = container.scrollTop; // 容器滚动高度
        const data = [] // 数据
        var isLoading = true; // 是否正在加载
        loading.style.display = 'block' // 显示加载提示
        generateData(page, 10).then(res => {
                data.push(...res)
                isLoading = false
                loading.style.display = 'none'
                renderHtml()
            })
            // 容器总高度
        var totalHeight = container.scrollHeight;
        // 绑定滚动事件
        container.addEventListener("scroll", function() {
            totalHeight = container.scrollHeight;
            clientHeight = container.clientHeight;
            scrollTop = container.scrollTop;
            if (totalHeight - (scrollTop + clientHeight) < 1 && !isLoading) {
                isLoading = true;
                page++
                loading.style.display = 'block' // 显示加载提示
                generateData(page, 10).then(res => {
                    data.push(...res)
                    isLoading = false
                    loading.style.display = 'none'
                    renderHtml()
                })
            }
        });
    </script>
</body>

</html>